<template>
  <div class="box">
    <!-- 背景图 -->
    <div class="Background">
      <img src="../img/首页/u19.png" alt />
    </div>
    <Hand @list="Type" @find="fn" title="兑换商城"></Hand>

    <BannerVue class="banner" :images="listStore.bannerImg" :HeiGht="30"></BannerVue>

    <TimeExchangeVue TextTitle="限时兑换" :hasOldPrice="true"></TimeExchangeVue>
    <div class="border"></div>

    <TimeExchangeVue TextTitle="近期热门"></TimeExchangeVue>
    <div class="border"></div>

    <GuessLikeVue></GuessLikeVue>
  </div>
</template>
  
<script setup>
import GuessLikeVue from "../components/Store/GuessLike.vue";
import BannerVue from "../components/Banner.vue";
import TimeExchangeVue from "../components/Store/TimeExchange.vue";
import Hand from "../components/Hand.vue";
import { useRouter, useRoute } from "vue-router";
import { ref } from "vue";
import { useListStore } from "../stores/list";
const listStore=useListStore()
const router = useRouter();
const route = useRoute();
const images = [
  "https://t7.baidu.com/it/u=1297102096,3476971300&fm=193&f=GIF",
  "https://t7.baidu.com/it/u=3655946603,4193416998&fm=193&f=GIF"
];

const Type = () => {
  router.push({
    path: "/Classify"
  });
};
const fn = () => {
  router.push({
    path: "/Search"
  });
};

// const GuessLikeArr=ref([])
// listStore.list.forEach(item => {
//   if(item.islike===1){
//     GuessLikeArr.push(item);
//   }
// });
// console.log(GuessLikeArr.value)

function initData() {
  if (route.path === "/Shop") {
    listStore.getInfo();
  }
}
initData()
</script>
  
<style scoped>
.box {
  width: 100vw;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.border {
  width: 100%;
  height: 2.667vw;
  background: #ecfdfa;
}
.Background {
  position: absolute;
  top: -16vw;
  left: 0;
  width: 100%;
  height: 234px;
}
img {
  width: 100%;
  height: 100%;
}
.banner {
  margin-top: 2.667vw;
  margin-bottom: 5.333vw;
}
</style>